<% layout('/layouts/default.html', {title: '付款选择', libs: ['validate','dataGrid']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box box-main" >
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa icon-notebook"></i> ${text('付款选择')}
            </div>
            <div class="box-tools pull-right">

            </div>
        </div>
        <#form:form id="inputForm"  model="${tpayment}" action="${ctx}/pay/tpayment/save" method="post" class="form-horizontal">
        <div class="box-body">
            <#form:hidden path="paymentId"/>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('编号')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="paymentCode" maxlength="100" class="form-control" readOnly="true" placeholder="自动生成"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group " >
                    <label class="control-label col-sm-4" title="">
                        <span class="required">*</span> ${text('供应商')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="supplierId" items="${supplierList}" itemLabel="supplierName" itemValue="supplierId" class="form-control required" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required ">*</span> ${text('日期')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="date" readonly="true"  maxlength="20" class="form-control laydate required"
                        dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required">*</span> ${text('服务订单')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="serviceOrderId"  items="${serviceOrderList}" itemLabel="serviceOrderCode" itemValue="serviceOrderId"  class="form-control required" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required ">*</span> ${text('付款/核销金额')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="paymentAmount" class="form-control required number"  readonly="true"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('应付单')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="apCode" items="${tapList}" itemLabel="apCode" itemValue="apId" dictType="" blankOption="true" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required ">*</span> ${text('币种')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="currency" dictType="sys_bizhongy" class="form-control required" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required ">*</span> ${text('付款方式')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="paymentMethod" dictType="pay_type" class="form-control required" />
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('付款银行')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:select path="paymentBank"  items="${taccountList}" itemLabel="accountName" itemValue="accountId" blankOption="true" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2" title="">
                            <span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-10">
                            <#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2" title="">
                            <span class="required hide">*</span><i class="fa icon-question hide"></i></label>
                        <div class="col-sm-10">
                            <#form:checkbox path="replaceFile" label="是否核销" class="form-control"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-left: 400px;">
                <div class="col-xs-6">
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-sm" onclick="getPaidInfo()">${text('查询')}</button>
                    </div>
                </div>
            </div>
        </div>
            <h4 class="form-unit">${text('应付单明细')}</h4>
            <div class="ml10 mr10">
                <table id="paidGrid"></table>
            </div>
            <h4 class="form-unit">${text('系统信息')}</h4>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('创建者')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="createBy" maxlength="64" class="form-control" disabled="true"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('创建时间')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="createDate" readonly="true" maxlength="20" class="form-control" disabled="true"
                        dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('更新者')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="updateBy" maxlength="64" class="form-control" disabled="true"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="control-label col-sm-4" title="">
                        <span class="required hide">*</span> ${text('更新时间')}：<i class="fa icon-question hide"></i></label>
                    <div class="col-sm-8">
                        <#form:input path="updateDate" readonly="true" maxlength="20" class="form-control" disabled="true"
                        dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <% if (hasPermi('pay:tpayment:edit')){ %>
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
                        <% } %>
                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
                    </div>
                </div>
            </div>
        </#form:form>


    </div>
    </div>
</div>
<% } %>
<script>
// 初始化DataGrid对象
$('#paidGrid').dataGrid({
    datatype: "local", // 设置本地数据
    autoGridHeight: function(){return 'auto'}, // 设置自动高度

    columnModel: [
        {header:'状态', name:'status', editable:true, hidden:true},
        {header:'主键', name:'paymentDetailId', editable:true, hidden:true},
        {header:'${text("应付单编号")}', name:'apCode', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'100', 'class':'form-control','readonly':'true'}},
        {header:'${text("品牌")}', name:'brand', width:150,  edittype:'select', editable:true,  editoptions:{'maxlength':'2', 'class':'form-control','readonly':'true',
                items: $.merge([{dictLabel:'&nbsp;',dictValue:''}], ${@DictUtils.getDictListJson('car_pinpai')}),
                itemLabel: 'dictLabel', itemValue: 'dictValue'
            }},
        {header:'${text("行号")}', name:'rowNumber', width:150,  edittype:'text', editable:true,  editoptions:{'maxlength':'2', 'class':'form-control','readonly':'true'}},
        {header:'${text("版型")}', name:'area', width:150, edittype:'select',  editable:true, editoptions:{'maxlength':'64', 'class':'form-control','readonly':'true',
                items: $.merge([{dictLabel:'&nbsp;',dictValue:''}], ${@DictUtils.getDictListJson('car_quyu')}),
                itemLabel: 'dictLabel', itemValue: 'dictValue'
            }},
        {header:'${text("车型")}', name:'model', width:150,  edittype:'text', editable:true,  editoptions:{'maxlength':'100', 'class':'form-control','readonly':'true'}},
        {header:'${text("车辆")}', name:'carId', width:150,  edittype:'text', hidden:true,  editable:true, editoptions:{'maxlength':'64', 'class':'form-control','readonly':'true'}},
        {header:'${text("车辆")}', name:'tcar.carName', width:150,  edittype:'text',  editable:true, editoptions:{'maxlength':'64', 'class':'form-control','readonly':'true'}},
        {header:'${text("车架号")}', name:'frameNumber', width:150,  edittype:'text', editable:true,  editoptions:{'maxlength':'100', 'class':'form-control','readonly':'true'}},
        {header:'${text("费用项目")}', name:'fixedExpense.fixedExpenseName', width:150, editable:true, edittype:'text', editoptions:{'class':'form-control','readonly':'true'}},
        {header:'${text("项目")}', name:'expenseItem', width:150, editable:true, edittype:'text', hidden:true, editoptions:{'class':'form-control','readonly':'true'}},
        {header:'${text("应付金额")}', name:'apAmount', width:150, editable:true, edittype:'text', editoptions:{'class':'form-control required number','readonly':'true'}},
        {header:'${text("剩余应付金额")}', name:'payentLeft', width:150,edittype:'text',  editable:true, editoptions:{'class':'form-control number','readonly':'true'}},
        {header:'${text("实付/核销金额")}', name:'actualApAmount', width:150, editable:true, edittype:'text', editoptions:{'class':'form-control number'}},
        {header:'${text("备注")}', name:'remarik', width:150, editable:true, edittype:'text', editable:true,  editoptions:{'maxlength':'255', 'class':'form-control','readonly':'true'}},
        {header:'${text("付款单ID")}', name:'paymentId.paymentId',  hidden:true},
        {header:'${text("预付款")}',name:'prepaymentCode1', editable:true, edittype:'text',  hidden:true},
        {header:'${text("预付款编号")}', name:'prepaymentCode', width:250,  edittype:'select', editable:true,  editoptions:{'class':'form-control',
                dataInit: function(element){
                    $(element).select2().on("change",function(){
                        var value =$(this).val();
                        var number=$(this).closest('tr').find("input[name=\"rowNumber\"]").val();
                        var type=$(this).closest('tr').find("input[name=\"expenseItem\"]").val();

                        var that =$(this)
                        $.ajax({
                            type: "POST",
                            async : false,
                            url: "${ctx}/prepay/tprepayment/findLeftMoney",
                            data: {number: number,value:value,type:type},
                            success: function (data) {
                                if(data!=null&&data!=""){
                                    that.closest('tr').find("input[name=\"prepaymentBalance\"]").val(data);
                                    that.closest('tr').find("input[name=\"prepaymentCode1\"]").val(value);
                                }
                            }
                        });
                    });
                }
            }},
        {header:'${text("预付款余额")}', name:'prepaymentBalance', width:150,  edittype:'text', editable:true,  editoptions:{'class':'form-control number','readonly':'true'}},

    ],


    editGrid: true,				// 是否是编辑表格
    editGridInitRowNum: 0,		// 编辑表格的初始化新增行数
    // 编辑表格的提交数据参数
    editGridInputFormListName: 'tpaymentDetailList', // 提交的数据列表名
    editGridInputFormListAttrs: 'status,paymentDetailId,apCode,rowNumber,brand,area,model,carId,frameNumber,expenseItem,apAmount,actualApAmount,remarik,paymentId.paymentId,prepaymentCode1,prepaymentBalance,', // 提交数据列表的属性字段

    // 加载成功后执行事件
    ajaxSuccess: function(data){

    }
});

$("#inputForm").validate({
    submitHandler: function(form){
        js.ajaxSubmitForm($(form), function(data){
            js.showMessage(data.message);
            if(data.result == Global.TRUE){
                js.closeCurrentTabPage(function(contentWindow){
                    contentWindow.page();
                });
            }
        }, "json");
    }
});
//查询
function getPaidInfo() {
    var h1 =$("#supplierId").val();
    var h2 =$("form").find("#apCode").val();
    var h3 =$("#serviceOrderId").val();

    if(h1==null||h1==""){
        js.showMessage("供应商不能为空");
        return;
    }
    if(h3==null||h3==""){
        js.showMessage("服务订单不能为空");
        return;
    }
    var data ={"supplierId":h1,"serviceOrderId":h3,"apId":h2}

    $.ajax({
        type: "post",
        url: "${ctx}/payment/tap/getTapList",
        data: data,
        dataType: "json",
        success: function(data){

            $('#paidGrid').jqGrid('clearGridData');　　　　//先清空，再加载
            $("#paidGrid").jqGrid('setGridParam', {
                datatype:"local",
                data:data　　                                      //result为ajax请求成功后后台返回的products
            }).trigger("reloadGrid");
            getPre();
        }

    });
}

$(function () {

   /* $("#date").attr("value",js.formatDate(new Date()
        , 'yyyy-MM-dd'));*/

    //提交
/*$("#btnSubmit").click(function () {
    var list =$("td[aria-describedby=\"paidGrid_apDetailId\"]")
    var str=""
    list.each(function () {
        str=str+$(this).attr("title")+",";
    })
    var supplierId =$("#supplierId").val();
    var date =$("#date").val();
    var serviceOrderId =$("#serviceOrderId").val();
    var currency =$("#currency").val();
    var paymentMethod =$("#paymentMethod").val();
    var paymentBank =$("#paymentBank").val();
    location.href="${ctx}/payment/tap/saveAll?str="+str+"&supplierId="+supplierId+"&date="+date+"&serviceOrderId="+serviceOrderId+"&currency="+currency+"&paymentMethod="+paymentMethod+"&paymentBank="+paymentBank
})*/
})
/*//费用项目
$(function () {
    var str="";
    $.ajax({
        type: "POST",
        async : false,
        url: "${ctx}/payment/tap/getExpenseItem",
        // data: {"serviceOrderId": $("#serviceOrderId").val()},
        dataType : "json",
        success: function (data) {
            // $('#currency').select2('val', data.currency);
            //根据订单编号赋值车架号
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var frameNumber1 = data[i].fixedExpenseName;

                    var frameNumberId = data[i].fixedExpenseId;
                    if(i!=data.length-1){
                        str+=frameNumberId+":"+frameNumber1+";";
                    }else {
                        str+=frameNumberId+":"+frameNumber1;// 这里是option里面的 value:label
                    }
                }

            } else{
                js.showErrorMessage("该订单没有车架号信息！");
            }
            $('#paidGrid').setColProp('expenseItem', {editoptions: {value:str}});
            $('#paidGrid').dataGrid('reloadGrid');

        }
    });

})*/


$(function () {
    $("table[id=\"paidGrid\"]").on("blur", "input[name=\"actualApAmount\"]", function () {
        var money = 0;
        $("input[name=\"actualApAmount\"]").each(function () {
            if ($(this).val() != NaN && $(this).val() != null && $(this).val() != "") {
                money = money + parseInt($(this).val());
            }
        })
        $("input[id=\"paymentAmount\"]").val(money)

    })
})
    var flag =false;

    function getPre(){
        if(flag){
            var serviceorder =$("#serviceOrderId").val();
            var supp =$("#supplierId").val();
            //调用后台查找预付单

            $.ajax({
                url:"${ctx}/prepay/tprepayment/findPrePay1",
                type: "post",
                data:{serviceorder:serviceorder,supp:supp},
                dataType: "json",
                success:function(result){

                    var list =$("#paidGrid").find("tr[role='row']")
                    if(result.length>0){
                        //有几个应付详情
                        for(var k=0;k<result.length;k++){
                            //共几行
                            for(var j=1;j<list.length;j++){

                                if($(list[j]).find("input[name=\"rowNumber\"]").val()==result[k].rowNumber&&$(list[j]).find("input[name=\"expenseItem\"]").val()==result[k].prepaymentType){
                                    //$(list[j]).find("input[name=\"prepaymentBalance\"]").val(result[k].paymentAmountEstimated);
                                    if($(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").find("option").length==0){
                                        $(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").append("<option selected></option>");
                                    }
                                    $(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").append("<option value="+result[k].prepaymentCode+">"+result[k].prepaymentCode+"</option>>");
                                    //val(result[k].prepaymentCode);
                                }
                            }
                        }
                    }
                }});
        }else{
            for(var j=0;j<$("#paidGrid").find("tr[role='row']").length;j++){

                $($("#paidGrid").find("tr[role='row']")[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select").html("");
                $($("#paidGrid").find("tr[role='row']")[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select").append("<option selected></option>");
                $($("#paidGrid").find("tr[role='row']")[j]).find("input[name=\"prepaymentBalance\"]").val("");

            }
        }
    }
    $(function () {
        $('#replaceFile1').on('ifClicked', function(){
            flag=!flag;
            if(flag){
                var serviceorder =$("#serviceOrderId").val();
                var supp =$("#supplierId").val();
                //调用后台查找预付单

                $.ajax({
                    url:"${ctx}/prepay/tprepayment/findPrePay1",
                    type: "post",
                    data:{serviceorder:serviceorder,supp:supp},
                    dataType: "json",
                    success:function(result){

                        var list =$("#paidGrid").find("tr[role='row']")

                        if(result.length>0){
                            //有几个应付详情
                            for(var k=0;k<result.length;k++){
                                //共几行
                                for(var j=1;j<list.length;j++){

                                    if($(list[j]).find("input[name=\"rowNumber\"]").val()==result[k].rowNumber&&$(list[j]).find("input[name=\"expenseItem\"]").val()==result[k].prepaymentType){
                                        if($(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").find("option").length==0){
                                            $(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").append("<option selected></option>");
                                        }
                                        $(list[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select[role=\"select\"]").append("<option value="+result[k].prepaymentCode+">"+result[k].prepaymentCode+"</option>>");

                                    }
                                }
                            }
                        }
                    }});
            }else{
                for(var j=0;j<$("#paidGrid").find("tr[role='row']").length;j++){

                    $($("#paidGrid").find("tr[role='row']")[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select").html("");
                    $($("#paidGrid").find("tr[role='row']")[j]).find("td[aria-describedby=\"paidGrid_prepaymentCode\"]").find("select").append("<option selected></option>");
                    $($("#paidGrid").find("tr[role='row']")[j]).find("input[name=\"prepaymentBalance\"]").val("");

                }
            }
        });
    })

    $(function () {
        $("#btnSubmit").click(function () {
            var list = $("input[name=\"actualApAmount\"]")
            var flag1 =false
            list.each(function () {

                if($(this).val()!=""&&$(this).val()!=null){
                    flag1 =true
                }
            })

            if(flag==false){
                if($("#paymentBank").val()==null||$("#paymentBank").val()==""){
                    js.showMessage("银行不能为空");
                    return false;
                }
                if(flag1==false||list.length<1){
                    js.showMessage("至少需添加一个实付");
                    return false;
                }
            }else {
                if(flag1==false||list.length<1){
                    js.showMessage("至少需添加一个实付");
                    return false;
                }
            }
        })
    })
</script>